<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body style="width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center">
    <div>
      <div>
        <label for="recursive">利用递归求1~n的阶乘:</label>
        <input type="number" id="recursive" />
        <button id="recursive-btn">求值</button>
        <input type="text" id="recursive-result" disabled />
      </div>
      <br>
      <div>
        <label for="fb">利用递归求斐波那序列：</label>
        <input type="number" id="fb" />
        <input type="button" id="fb-btn" value="求值" />
        <input type="text" id="fb-result" disabled />
      </div>
    </div>
    <script>
      function $$(select) {
        return document.querySelector(select);
      }
      // 利用递归求1~n的阶乘 1 * 2 * 3 * 4 * ..n
      function recursive(n) {
        if (n == 1) {
          return 1;
        }
        return n * recursive(--n);
      }
      //  求斐波那契数列
      function fb(n) {
        if (n == 1 || n == 2) {
          return 1;
        }
        return fb(n - 1) + fb(n - 2);
      }

      $$("#recursive-btn").addEventListener("click", function() {
        console.log(recursive($$("#recursive").value));
        $$("#recursive-result").value = recursive($$("#recursive").value);
      });

      $$("#fb-btn").addEventListener("click", function() {
        $$("#fb-result").value = fb($$("#fb").value);
      });
    </script>
  </body>
</html>
